import styled from "styled-components";
import View from "../View";

export const SkillList = styled.div`
  display: flex;
  margin-top: 5px;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
`;
export const SkillListItem = styled(View)`
  width: 0;

  .progressWrap {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .progress {
    background: rgb(0 0 0 / 20%);
    flex: 1;
    height: 6px;
  }

  .progressBar {
    /* stylelint-disable-next-line custom-property-pattern */
    background: var(---bkg);
    height: 100%;
    float: left;
  }
`;
